<template>
	<view>
		<view class="box-bg">
			<uni-nav-bar left-icon="left" :title="title" @clickLeft="back">
				<block v-slot:right><button type="primary" plain="true" size="mini" @click="navigateToEdit">编辑</button></block>
			</uni-nav-bar>
		</view>

		<uni-section title="本次签到名单" type="line">
			<uni-search-bar placeholder="搜索用户姓名" @confirm="search" v-model="keyword" />

			<view style="text-align: center;"><uni-data-select v-model="value" :localdata="range" @change="change" :clear="true" placeholder="待阅" /></view>

			<uni-list>
				<uni-list-item v-for="item in stateList" :title="item.userName" :note="item.sign">
					<template v-slot:footer>
						<button style="margin-right: 10px;" type="primary" plain="true" size="mini" @click="preview(item.proof)">检查</button>
						<button type="primary" plain="true" size="mini" @click="pass(item)">通过</button>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-load-more iconType="circle" :status="status" @clickLoadMore="getMoreState" />
		</uni-section>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 'more',
			pageNum: 1,
			pageSize: 1,
			requestData: {},
			stateList: [],
			keyword: '',
			value: '待阅',
			range: [
				{
					value: '未提交',
					text: '未提交'
				},
				{
					value: '待阅',
					text: '待阅'
				},
				{
					value: '签到成功',
					text: '签到成功'
				},
				{
					value: '签到失败',
					text: '签到失败'
				}
			],
			title: '',
			gutter: 0,
			nvueWidth: 730,

			activityId: 1,
			activityName: '',
			stage: 1,
			count: 1,
			beginTime: '',
			endTime: '',
			maxStage: 1,
			apiUrl: 'http://localhost:8080/'
		};
	},
	onLoad: function(option) {
		this.activityId = option.activityId;
		this.activityName = option.activityName;
		this.maxStage = option.maxStage;
		this.stage = option.stage;
		this.count = option.count;
		this.beginTime = option.beginTime;
		this.endTime = option.endTime;
		this.title = '第' + this.stage + '阶段 第' + this.count + '次签到';

		this.requestData.activityId = option.activityId;
		this.requestData.stage = option.stage;
		this.requestData.count = option.count;
		this.requestData.sign = this.value;

		this.getMemberState();
	},
	onPullDownRefresh() {
		this.pageNum = 1;
		this.getMemberState();
	},
	methods: {
		search(res) {
			this.requestData.name = res.value;
			this.pageNum = 1;
			this.getMemberState();
		},
		change(value) {
			this.requestData.sign = value;
			this.pageNum = 1;
			this.getMemberState();
		},
		navigateToEdit() {
			uni.navigateTo({
				url:
					'../sign-editor/sign-editor?activityId=' +
					this.activityId +
					'&activityName=' +
					this.activityName +
					'&maxStage=' +
					this.maxStage +
					'&edit=true&stage=' +
					this.stage +
					'&count=' +
					this.count +
					'&beginTime=' +
					this.beginTime +
					'&endTime=' +
					this.endTime
			});
		},
		preview(src) {
			uni.previewImage({
				urls: [src]
			});
		},
		pass(item) {
			item.sign = '签到成功';
			uni.request({
				method: 'PUT',
				url: this.apiUrl + 'sign',
				header: {
					// Authorization: uni.getStorageSync('token')
				},
				data: [item],
				success: res => {
					console.log(res.data);
					if (res.statusCode == 400) {
						uni.showToast({
							icon: 'error',
							title: JSON.parse(res.data).message
						});
					}
				},
				fail: err => {
					reject(err);
					return uni.showToast({
						icon: 'loading',
						title: '请求失败'
					});
				}
			});
			uni.startPullDownRefresh();
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		check(proof) {},
		changeValue(value) {
			this.changed = true;
		},
		getMoreState() {
			if (this.status == 'more') {
				this.pageNum++;
				this.getMemberState();
			}
		},
		getMemberState() {
			this.requestData.pageNum = this.pageNum;
			this.requestData.pageSize = this.pageSize;
			uni.request({
				method: 'GET',
				url: this.apiUrl + 'sign',
				header: {
					// Authorization: uni.getStorageSync('token')
				},
				data: this.requestData,
				success: res => {
					console.log(res.data);
					if (this.pageNum <= 1) {
						this.stateList = [];
					}
					let originSize = this.stateList.length;
					this.stateList.push.apply(this.stateList, res.data.records);
					let deltaSize = res.data.records.length;
					if (res.data.total <= originSize + deltaSize) {
						this.status = 'noMore';
					} else {
						this.status = 'more';
					}

					uni.stopPullDownRefresh();
				},
				fail: err => {
					this.pageNum -= 1;
					reject(err);
					return uni.showToast({
						icon: 'loading',
						title: '请求失败'
					});
				}
			});
		}
	}
};
</script>

<style>
/* 修改buttom默认样式 */
button {
	font-size: 18rpx;
	height: 60rpx;
}

.box-bg {
	background-color: #f5f5f5;
	padding: 5px 0;
}
</style>
